<template>
      <!-- 导航栏 -->
      <ul class="nav">
        <li @click="$router.push('/zxfa')">
          <i class="iconfont i1 iconfonts icon-case"></i><br />
          <span>装修方案</span>
        </li>
        <li @click="dotoXiaoguo">
          <i class="iconfont i2 iconfonts icon-pics"></i> <br />
          <span>效果图</span>
        </li>
        <li @click="gotoDevsjs">
          <i class="iconfont i3 iconfonts icon-designer"></i> <br />
          <span>设计师</span>
        </li>
        <li @click="gotoZhibo">
          <i class="iconfont i4 iconfonts icon-construction-site"></i> <br />
          <span>装修工地</span>
        </li>
        <li @click="gotoGonhlue">
          <i class="iconfont i5 iconfonts icon-decorate"></i> <br />
          <span>装修攻略</span>
        </li>
        <li @click="$router.push('/Bbb')">
          <i class="iconfont i6 iconfonts icon-loans"></i> <br />
          <span>装修贷款</span>
        </li>
        <li>
          <i class="iconfont i7 iconfonts icon-pencle"></i> <br />
          <span>免费预约</span>
        </li>
        <li @click="$router.push('/Offer')">
          <i class="iconfont i8 iconfonts">10</i> <br />
          <span>十秒报价</span>
        </li>
      </ul>
</template>

<script>
export default {
    data() {
        return {};
    },
    mounted() {},
    methods: {
    gotoDevsjs() {
      this.$router.push("/devsjs");
    },
    gotoGonhlue() {
      this.$router.push("/gonglue");
    },
    dotoXiaoguo() {
      this.$router.push("/xiaoguo");
    },
    gotoZhibo() {
       this.$router.push("/zhibo");
    }
    },
    components:{}
};
</script>

<style lang='scss' scoped>
.nav {
  width: 100%;
  height: 250px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  li {
    width: 23%;
    text-align: center;
    span {
      margin-bottom: 0px;
    }
  }
}
.iconfonts {
  color: #333;
  width: 60px;
  text-align: center;
  height: 60px;
  line-height: 60px;
  border-radius: 50px;
  color: #fff;
  margin-bottom: 5px;
  display: inline-block;
  font-size: 28px;
}
.i1 {
  background-color: #39c894;
}
.i2 {
  background-color: #feb505;
}
.i3 {
  background-color: #eed215;
}
.i4 {
  background-color: #00b2b2;
}
.i5 {
  background-color: #1b9af7;
}
.i6 {
  background-color: #7b72e9;
}
.i7 {
  background-color: #ff4351;
}
.i8 {
  background-color: #fe8864;
}

</style>
